/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'
import { Col, Row, Table } from 'antd';
import dayjs from 'dayjs'
import { orderQuery } from '../service/orderService';

const columns = [
  {
    title: '产品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '产品型号',
    dataIndex: 'xing',
    key: 'xing',
  },
  {
    title: '颜色',
    dataIndex: 'color',
    key: 'color',
  },
  {
    title: '光源',
    dataIndex: 'guang',
    key: 'guang',
  },
  {
    title: '方向',
    dataIndex: 'dir',
    key: 'dir',
  },
  {
    title: '规格',
    dataIndex: 'mm',
    key: 'mm',
  },
  {
    title: '数量',
    dataIndex: 'num',
    key: 'num',
  },
  {
    title: '单价',
    dataIndex: 'mon',
    key: 'mon',
  },
  {
    title: '总价',
    dataIndex: 'mons',
    key: 'mons',
  }
];

export default function Print(props) {
  const [data, setdata] = useState([])
  const [str, setstr] = useState({})
  useEffect(() => {
    (async () => {
      let { data } = await orderQuery(props.match.params)
      setdata(
        data.list.map((item, index) => {
          return {
            key: index + 1,
            name: item.productname,
            xing: item.productmodel,
            color: item.productcolor,
            guang: item.productlight,
            dir: item.productdirection,
            mm: item.productsize,
            num: item.productnum,
            mon: item.productprice,
            mons: item.productnum * item.productprice + '.00',
          }
        })
      )
      setstr(
        {
          jia: data.list[0].partaid.partaname,
          tel: data.list[0].partaid.tel,
          orderid: data.list[0].orderid,
          yi: data.list[0].partbid.partbname,
          date: dayjs(data.list[0].date).format('YYYY-MM-DD'),
          fax: data.list[0].partbid.fax
        }
      )
    })()
  }, [])
  return (
    <div style={{
      marginLeft: '100px',
      marginRight: '100px'
    }}>
      <Row>
        <Col span={24} style={{ fontSize: '20px', textAlign: 'center', fontWeight: 'bold', margin: '10px' }}>橙子购物车</Col>
      </Row>
      <Row>
        <Col span={24} style={{ fontSize: '15px', textAlign: 'center', fontWeight: 'bold', margin: '10px' }}>订单确认书</Col>
      </Row>
      <Row style={{
        marginTop: '30px'
      }}>
        <Col span={12}
          style={{
            display: 'flex',
            flexDirection: 'column',
          }}
        >
          <span>甲方：{str.jia}</span>
          <span>电话：{str.tel}</span>
          <span>乙方：{str.yi}</span>
        </Col>
        <Col span={12}
          style={{
            display: 'flex',
            flexDirection: 'column',
          }}>
          <span>订单：{str.orderid}</span>
          <span>日期：{str.date}</span>
          <span>传真：{str.fax}</span>
        </Col>
      </Row>
      <Row style={{
        marginTop: '50px'
      }}>
        <Col span={24}>兹因甲方向乙方订购下列产品，经双方议妥条款如下，以资共同遵守。</Col>
      </Row>
      <Table columns={columns} dataSource={data} bordered pagination={false}
        summary={(pageData) => {
          let totalnum = 0;
          let totalmons = 0;
          pageData.forEach(({ num, mons }) => {
            totalnum += num * 1;
            totalmons += mons * 1;
          });
          return (
            <Table.Summary fixed>
              <Table.Summary.Row>
                <Table.Summary.Cell index={0} colSpan={6}>总价</Table.Summary.Cell>
                <Table.Summary.Cell index={1} colSpan={2}>{totalnum}</Table.Summary.Cell>
                <Table.Summary.Cell index={2}>{totalmons + '.00'}</Table.Summary.Cell>
              </Table.Summary.Row>
            </Table.Summary>
          )

        }
        } />
    </div>
  )
}

